<template>
    <div>


        <el-table :data="tableData"
                  :cell-style="styleBack"
                  :header-cell-style="getRowClass">
            <el-table-column prop="uid" label="学号" width="160">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="190">
            </el-table-column>
            <el-table-column prop="nikename" label="姓名" width="190">
            </el-table-column>
            <el-table-column prop="password" label="密码">
            </el-table-column>

            <el-table-column label="操作">

                <template slot-scope="scope">
                    <el-button type="primary" @click="addStudent()">添加    </el-button>
                    <el-button @click="deleteStudent(scope.row)" type="danger" >删除</el-button>
                    <el-button type="success"  @click="editStudent(scope.row)">修改</el-button>
                </template>
            </el-table-column>




        </el-table>

        <!--                    :page-size="pageSize"-->
        <div style="margin-top: 0.2rem; margin-left: -1.8rem;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5,10,15]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>


        <!--添加的弹出层dialogVisible:控制对话框的显示和隐藏-->
        <el-dialog
                title="添加信息"
                :visible.sync="dialogVisible1"
                width="30%"
        >
            <!--:model:绑定表单数据-->
            <el-form label-width="80px" :model="addForm" ref="addFormRef">

                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>

                <el-form-item label="姓名" prop="nikename">
                    <el-input v-model="addForm.nikename"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="confirmAdd()" :visible.sync="dialogVisible1">确认添加</el-button>
        </span>
        </el-dialog>




        <!--修改的弹出层dialogVisible:控制对话框的显示和隐藏-->
        <el-dialog
                title="修改提示"
                :visible.sync="dialogVisible"
                width="30%"
        >
            <!--:model:绑定表单数据-->
            <el-form label-width="80px" :model="editForm">

                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editForm.email"></el-input>
                </el-form-item>

                <el-form-item label="姓名" prop="nikename">
                    <el-input v-model="editForm.nikename"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="editForm.password"></el-input>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmEdit()">确认修改</el-button>
        </span>
        </el-dialog>





    </div>
</template>


<script>
    export default {
        name: "student",

        data() {

            return {
                tableData: [],
                currentPage:1,
                pageSize:5,
                total: 1,
                //添加和修改
                dialogVisible: false,
                dialogVisible1: false,
                //定义添加表单的数据变量
                addForm: {},
                //定义修改表单的数据变量
                editForm: {},
                //查询的表单
                lookForm:{},
            }
        },
        created() {
            this.intoTable();
        },
        methods:{

            look(){
                this.$http.post("http://localhost:8081/user/list",this.lookForm).then(resp=>{
                    console.log(resp)
                    this.tableData=resp.data.data;
                })
            },
            //添加学生
            addStudent(){
                this.dialogVisible1 = true;
            },

            //确认添加
            confirmAdd(){
                this.$http.post("http://localhost:8081/user/add",this.addForm).then(result=>{
                    if (result.data.code === 200) {
                        this.$message.success("添加学生信息成功")
                        //关闭弹出层
                        this.dialogVisible1 = false;
                        //重新加在表格数据
                        this.intoTable();
                        //清空数据拒绝双向绑定
                        this.$refs.addFormRef.resetFields();
                    }
                })
            },

            //删除学生
            deleteStudent(row){
                this.$http.delete("http://localhost:8081/user/delete?uid="+row.uid).then(resp=>{
                    if (resp.data.code === 200) {
                        this.$message.success("删除成功");
                        this.intoTable();
                    }
                })
            },


            //修改
            editStudent(row){

                this.dialogVisible = true;
                console.log(row)

                //在此转json是为了把数据固定阻断双向绑定里面的数据同步
                let parse = JSON.parse(JSON.stringify(row));
                this.editForm = parse;
                },
            //确认修改
            confirmEdit(){

                this.$http.put("http://localhost:8081/user/update",this.editForm).then(resp=>{
                    if (resp.data.code === 200) {
                        this.$message.success("修改学生信息成功")
                        //关闭弹出层
                        this.dialogVisible = false;
                        //重新加在表格数据
                        this.intoTable();
                    }
                })
            },

            intoTable(){

                this.$http.get("http://localhost:8081/user/select?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(resp=>{

                    console.log(resp)
                    if (resp.data.code===200){
                        this.$message.success("初始化信息成功");
                        this.tableData=resp.data.data.list;
                        this.total = resp.data.data.total;
                    }
                })
            },

            //分页设置每页多少条数据
            handleSizeChange(val) {

                this.pageSize = val;
                this.intoTable();

            },

            //当当前页数改变时，查找当前页和当前设置的每页多少条数据
            handleCurrentChange(val) {
                this.currentPage = val
                this.intoTable();
            },
            // 表格奇偶层样式
            // styleBack({ row, column, rowIndex, columnIndex }) {
            //     if ((rowIndex + 1) % 2 === 0) {
            //         return "background:#053c4a; color:#fff;border:1px solid #053c4a";
            //     } else {
            //         return "background:#042831; color:#fff;border:1px solid #042831";
            //     }
            // },
            // 表头样式
            // getRowClass({ rowIndex }) {
            //     return "background:#053c4a; color:#fff;border:3px solid #053c4a";
            // },

        }
    }
</script>


<style scoped>

</style>